import React from 'react';
import Chart from 'echarts-for-react';
import { Tabs } from 'antd';
const TabPane = Tabs.TabPane;
import echarts from 'echarts';
import styles from './MybarRight.less';
import request from '../../../utils/request';
let data = {
    time:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
    value:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
}
const style = {
    color:'#fff',
    marginLeft:'50%',
    position: 'absolute',
    zIndex:100,
    fontSize:12,
};
const factorList = ['六价铬','镉','铅','铜','砷','汞','锌'];
const factorCode = ['cr','cd','pb','cu','as_','hg','zn'];

class MyLineRightTwo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            activeKey:'cr',
            dataList: '',
            wellNum:1
        };
    }
    componentDidMount() {
      

        request({
            url: `/web/redstar/cockpitport/groundwaterDetection`,
            method: 'POST',
            data: {index:this.state.activeKey,wellNum:this.state.wellNum}
    
        }).then(data => {
            let dataList = data.ret;
          
            this.setState({
                dataList
            })

            this.changeKey = setInterval(() => {
                let nowKey = factorCode.indexOf(this.state.activeKey);
                let newKey;
                if(nowKey<6){
                    newKey = factorCode[nowKey+1];
                }else{
                    newKey = factorCode[0];
                }
                this.onTabClick(newKey);
                this.setState({
                    activeKey:newKey
                })
            }, 10000);
        })


 
    }
    componentWillUnmount() {
        clearTimeout(this.changeKey)
    }
    onTabClick = (key) => {
        request({
            url: `/web/redstar/cockpitport/groundwaterDetection`,
            method: 'POST',
            data: {index:key,wellNum:this.state.wellNum}
    
        }).then(data => {
            let dataList = data.ret;
            this.setState({
                activeKey:key,
                dataList
            })
        })
    };

    onBtn = (v) => {
        this.setState({
            wellNum: v
        })

    }


    setOption = () => {
        let myOption;
        let data = this.state.dataList;
     
        myOption = {
        textStyle:{color:'#fff'},
        color:'#2EC2FF',
        tooltip : {
            trigger: 'axis'
        },
        grid: {
            top:'35%',
            left: '4%',
            right: '8%',
            bottom: '8%',
            containLabel: true
        },
        calculable : true,
        xAxis : [
            {
                axisLine:{lineStyle:{color:'#70D7FF'}},
                type : 'category',
                data : data.time
            }
           
        ],
        yAxis : [
            {
                axisLine:{lineStyle:{color:'#144B59'}},
                splitLine:{lineStyle:{color:'#063436',type:'dashed'}},
                type : 'value',
                name:this.state.activeKey == 'cr'?'(mg/L)':'(ug/L)',
                max: function(value) {
                    return value.max<Number(data.standard)?Number(data.standard):value.max
                }
            },
            
        ],
        series : [
            {
                name:'实时值',
                type:'line',
                showSymbol:false,
                itemStyle:{
                    shadowColor: '#fff',
                    shadowBlur:11
                },

                areaStyle: {
                    opacity:0.4
                },
                markLine : {
                    data : [
                        {yAxis : data.standard, name : '限值'}
                    ],
                    itemStyle:{
                        
                        normal: {
                            color:'#D0C047',type:'dashed',
                        }
                    }
                },
                data:data.value
            }
        ]
    };
        return myOption;
    };

    
    render() {
     
        return (
            <div className={styles.Tabs} style={{height:"80vh",position:'relative'}}>
                 <div style={{ color: '#fff', position: 'absolute', top: '-20px', right: 15, zIndex: 15 }}>
                    <span className={styles.titleBtn1} style={{ backgroundImage: `url(${this.state.wellNum === 1 ? require('../../../assets/tabBtn.png') : ''})` }} onClick={this.onBtn.bind(this, 1)}>#1</span>
                    <span style={{ backgroundImage: `url(${this.state.wellNum === 2 ?require('../../../assets/tabBtn.png') : ''})` }} className={styles.titleBtn1} onClick={this.onBtn.bind(this, 2)}>#2</span>
                    <span className={styles.titleBtn1} style={{ backgroundImage: `url(${this.state.wellNum === 3 ? require('../../../assets/tabBtn.png') : ''})` }} onClick={this.onBtn.bind(this, 3)}>#3</span>
                    <span style={{ backgroundImage: `url(${this.state.wellNum === 4 ?require('../../../assets/tabBtn.png') : ''})` }} className={styles.titleBtn1} onClick={this.onBtn.bind(this, 4)}>#4</span>
                </div>
                <Tabs
                    tabBarStyle={style}
                    defaultActiveKey="0"
                    tabBarGutter={5}
                    size="small"
                    style={{width:'100%',height:'100%'}}
                    activeKey={this.state.activeKey}
                    onChange={this.onTabClick}>
                   
                    {
                        factorList.map((index,key)=>{
                            return(
                                <TabPane tab={index} key={factorCode[key]}
                               
                                >
                                    <Chart
                                        option={this.setOption()}
                                        notMerge
                                        lazyUpdate
                                        style={{ height: "90%" }}
                                    />
                                </TabPane>
                            )
                        })
                    }
                </Tabs>
            </div>
        )
    }
}
export default MyLineRightTwo;
